<template>
  <div>
    <div class="detail">
      <div class="detail-img" @click="handleGallery">

        <img :src="bannerImg" alt="">
      </div>
      <div class="detail-info">
        <div class="title">
          {{ sightName }}
        </div>
        <div class="banner-number">
          <span class="iconfont">&#xe617;</span>
          2
        </div>
      </div>
    </div>
    <fade-animation>
      <detail-gallery v-show="showGallery" @close="handleClose" :gallaryImg="gallaryImgs"></detail-gallery>
    </fade-animation>

    <detail-header></detail-header>
    <div class="content">
      <detail-list :List="categoryList"></detail-list>
    </div>
  </div>
</template>

<script>
  import DetailGallery from './components/gallery'

  import DetailHeader from './components/header'

  import DetailList from  './components/DetailList'

  import FadeAnimation from '../../animation/fade'

  import axios from 'axios'

    export default {
        name: "detail",
      data() {
          return {
            showGallery:false,
            sightName:'',
            bannerImg:'',
            gallaryImgs:[],
            categoryList:[]
          }
      },
      components:{
          DetailGallery,
          DetailHeader,
          DetailList,
          FadeAnimation
      },
      methods:{
          handleGallery() {
            this.showGallery = true
          },
        handleClose(value) {
            this.showGallery = value
          },
        // ?id=' + this.$router.params.id
        getDetailInfo() {
          axios.get('/api/detail.json?id=' + this.$route.params.id).then((response) => {
            let res = response.data.data
            console.log(res);
            if (res ) {
              this.sightName = res.sightName
              this.bannerImg = res.bannerImg
              this.gallaryImgs = res.gallaryImgs
              this.categoryList = res.categoryList
            }
          })
        }
      },
      mounted() {
          this.getDetailInfo()
      }
    }
</script>

<style lang="stylus" scoped>
  .content
    height:50rem
  .detail
    position: relative
    .detail-img
      overflow: hidden
      height:0
      padding-bottom:55%
      img
        width:100%
    .detail-info
      display: flex
      position:absolute
      bottom:0
      left:0
      right:0
      line-height:.6rem
      color: #fff
      background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
      .title
        flex:1
        font-size:.32rem
        padding:0 .2rem

      .banner-number
        padding:0 .4rem
        height:.4rem
        line-height:.4rem
        margin-top:.08rem

        border-radius:.2rem
        background-color: rgba(0,0,0,.8);

</style>
